<template>
  <div class="home-content">
    <!-- 中間三圖層 -->
    <div class="middle-row">
      <div class="chart-area">
        <BarChart class="chart-content" />
      </div>
      <div class="chart-area">
        <WorldMapChart class="chart-content" />
      </div>
      <div class="chart-area">
        <ScatterChart  />
      </div>
    </div>

    <!-- 底部三圖層 -->
    <div class="bottom-row">
      <div class="chart-area">
        <LineChart class="chart-content" />
      </div>
      <div class="chart-area">
        <PieChart class="chart-content" />
      </div>
      <div class="chart-area">
        <HeatmapChart class="chart-content" />
      </div>
    </div>
  </div>
</template>

<script setup>
import BarChart from "@/views/echarts1.vue"; // 柱狀圖組件
import PieChart from "@/views/echarts2.vue"; // 餅圖組件
import ScatterChart from "@/views/echarts3.vue"; // 散點圖組件
import HeatmapChart from "@/views/echarts4.vue"; // 熱力圖組件
import LineChart from "@/views/Framework.vue"; // 折線圖組件
import WorldMapChart from "@/views/echarts5.vue"; // 世界地圖組件
</script>

<style scoped>
.home-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.middle-row, .bottom-row {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  height: 500px;
  flex: 1;
  padding: 0;
  gap: 0;
}

.bottom-row {
  height: 500px;
  flex: none;
}

.bottom-row { flex: 4; }

.chart-area {
  background: rgb(13, 30, 58);
  /* background-color: #333; 背景颜色 */
  background: rgba(20, 40, 70, 0.95);
  border: 2px solid #1e90ff;
  border-radius: 0;
  box-shadow: 0 0 20px #1e90ff44;
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  height: 500px;
}

.chart-content {
  width: 100%;
  height: 100%;
  min-height: 100px;
  min-width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-row .chart-area:nth-child(1) { flex-basis: 30%; max-width: 30%; }
.middle-row .chart-area:nth-child(2) { flex-basis: 40%; max-width: 40%; }
.middle-row .chart-area:nth-child(3) { flex-basis: 30%; max-width: 30%; }
.middle-row .chart-area { flex-shrink: 1; flex-grow: 0; }
</style>